<!--
 * @Descripttion: 分类筛选器
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2025年5月26日15:59:52
 * @LastEditors:
 * @LastEditTime:
-->

<template>
	<div class="sc-select-filter">
		<div v-if="data.length<=0" class="sc-select-filter__no-data">
			暂无数据
		</div>
		<div v-for="item in data" :key="item.key" class="sc-select-filter__item">
			<div class="sc-select-filter__item-title" :style="{'width':labelWidth+'px'}"><label>{{item.title}}：</label>
			</div>
			<div class="sc-select-filter__item-options">
				<ul>
					<li :class="{'active':selected[item.key]&&selected[item.key].includes(option.value)}"
						v-for="option in item.options" :key="option.value" @click="select(option, item)">
						<el-icon v-if="option.icon">
							<component :is="option.icon" />
						</el-icon>
						<span>{{option.label}}</span>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => []
			},
			selectedValues: {
				type: Object,
				default: () => {
					return {}
				}
			},
			labelWidth: {
				type: Number,
				default: 80
			},
			outputValueTypeToArray: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				selected: {}
			}
		},
		watch: {
			data(val) {
				val.forEach(item => {
					this.selected[item.key] = this.selectedValues[item.key] ||
						((Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []);
				})
			}
		},
		computed: {
			selectedString() {
				var outputData = JSON.parse(JSON.stringify(this.selected))
				for (var key in outputData) {
					outputData[key] = outputData[key].join(",")
				}
				return outputData
			}
		},
		mounted() {
			//默认赋值
			this.data.forEach(item => {
				this.selected[item.key] = this.selectedValues[item.key] ||
					((Array.isArray(item.options) && item.options.length) ? [item.options[0].value] : []);
			})
		},
		methods: {
			select(option, item) {
				//判断单选多选
				if (item.multiple) {
					//如果多选选择的第一个
					if (option.value === item.options[0].value) {
						//就赋值第一个的值
						this.selected[item.key] = [option.value]
					} else {
						//如果选择的值已有
						if (this.selected[item.key].includes(option.value)) {
							//删除选择的值
							this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === option.value), 1)
							//当全删光时，把第一个选中
							if (this.selected[item.key].length == 0) {
								this.selected[item.key] = [item.options[0].value]
							}
						} else {
							//未有值的时候，追加选中值
							this.selected[item.key].push(option.value)
							//当含有第一个的值的时候，把第一个删除
							if (this.selected[item.key].includes(item.options[0].value)) {
								this.selected[item.key].splice(this.selected[item.key].findIndex(s => s === item.options[0]
									.value), 1)
							}
						}
					}
				} else {
					//单选时，如果点击了已有值就赋值
					if (!this.selected[item.key].includes(option.value)) {
						this.selected[item.key] = [option.value]
					} else {
						return false
					}
				}
				this.change()
			},
			change() {
				if (this.outputValueTypeToArray) {
					this.$emit('onChange', this.selected)
				} else {
					this.$emit('onChange', this.selectedString)
				}
			}
		}
	}
</script>

<style scoped>
	.sc-select-filter {
		width: 100%;
	}

	.sc-select-filter__item {
		display: flex;
	}

	.sc-select-filter__item-title {
		width: 80px;
	}

	.sc-select-filter__item-title label {
		font-size: 14px;
		padding-top: 13px;
		display: inline-block;
		color: #999;
	}

	.sc-select-filter__item-options {
		flex: 1;
		border-bottom: 1px dashed var(--el-border-color-light);
	}

	.sc-select-filter__item-options ul {
		display: flex;
		flex-wrap: wrap;
		padding-top: 10px;
	}

	.sc-select-filter__item-options li {
		list-style: none;
		cursor: pointer;
		height: 28px;
		padding: 0 15px;
		border-radius: 32px;
		margin: 0 10px 10px 0;
		display: flex;
		align-items: center;
		background: var(--el-color-primary-light-9);
	}

	.sc-select-filter__item-options li .el-icon {
		margin-right: 3px;
		font-size: 16px;
	}

	.sc-select-filter__item-options li:hover {
		color: var(--el-color-primary);
	}

	.sc-select-filter__item-options li.active {
		background: var(--el-color-primary);
		color: #fff;
		font-weight: bold;
	}

	.sc-select-filter__item:last-of-type .sc-select-filter__item-options {
		border: 0;
	}

	.sc-select-filter__no-data {
		color: #999;
	}
</style>
